<template>
  <HPopup
      class="start-flow-view-flow-poup"
      title="查看流程"
      v-model:show="innerShow">
    <StartFlowViewFlowPopupLayout>
      <StartFlowViewFlowPreview v-if="!!flow && innerShow" :flow="flow"/>
      <template #footer>
        <StartFlowViewFlowPopupFooter @close="close"/>
      </template>
    </StartFlowViewFlowPopupLayout>
  </HPopup>
</template>
<script setup>
import HPopup from '@comp/HPopup/HPopup.vue';
import {createFormDefinition, createProps} from '@/utils';
import {computed} from 'vue';
import StartFlowViewFlowPopupLayout from '@/views/StartFlowView/StartFlowViewFlowPopup/StartFlowViewFlowPopupLayout.vue';
import StartFlowViewFlowPopupFooter from '@/views/StartFlowView/StartFlowViewFlowPopup/StartFlowViewFlowPopupFooter.vue';
import StartFlowViewFlowPreview from '@/views/StartFlowView/StartFlowViewFlowPopup/StartFlowViewFlowPreview.vue';

defineOptions({name: 'StartFlowViewFlowPoup'});
const emits = defineEmits(['update:show']);

const props = defineProps({
  show: createProps(Boolean),
  formDefinition: createProps(Object, createFormDefinition),
  flowId: createProps(String),
});

const innerShow = computed({
  get() {
    return props.show || false;
  },
  set(val) {
    emits('update:show', val);
  }
});

const flow = computed(() => {
  let flows = props.formDefinition.flows;
  let flow = flows.find(f => f.id === props.flowId);
  return flow;
})

function close() {
  emits('update:show', false);
}

</script>
<style lang="less">
.start-flow-view-flow-poup {
  min-height: 100vh !important;
  height: 100vh !important;
}
</style>